// 存放首页的数据
$.get("https://www.easy-mock.com/mock/5a17dba3b23118413626a5d2/test/testing",
function (data) {
    // console.log(data);
    // 美食菜单的顶部数据渲染
    const $data = $(data.lis).slice(0,2);
    // console.log($data);
    const $tagView = [
        '<div class="tag-view">',
            '<div class="container">',
            '</div>',
        '</div>',
    ].join('');
    const $tagItem = '<div class="content-tag-item"></div>';
    const $dls = '<dl></dl>';
    const $dts = '<dt></dt>';
    const $dds = '<dd><a href="mobile-detail.html"></a></dd>';

    
    $($data).each(function (index, element) {
        // console.log(index, element);
        const $index = index;
        const $tag = element.items;

        // 手机
        $($tagView).clone().appendTo("#mobile-list .option");
        const $lists = $(".option .tag-view").slice(1);
        // console.log($lists);

        // pc
        $($tagItem).clone().appendTo("#list .content-tag");
        const $tagLis = $(".content-tag .content-tag-item").slice(1);
        // console.log($tagLis);


        $($tag).each(function (index, element) {
            // console.log(index, element);
            const $dlIndex = index;
            // const $dls = '<dl></dl>';
            // const $dts = '<dt></dt>';
            const $text = element.btitle;

            // 手机
            const $list = $lists.get($index);           
            // console.log($list);
            const $container = $($list).find(".container");
            // console.log($container);

            // pc
            const $tagList = $tagLis.get($index);
            // console.log($tagList);

            $($dls)
                .clone().appendTo($container)
                .addClass("clearfix")
                .append($dts).clone()
                .end().find("dt").text(element.bword+":")
                .end().clone().appendTo($tagList)
                .removeClass("clearfix")
                
            // 手机
            const $dl = $($list).find("dl").get($dlIndex);
            // console.log($dl);
            
            // pc
            const $tagdl = $($tagList).find("dl").get($dlIndex);

            $($text).each(function (index, element) {
                // console.log(index, element);

                $($dds)
                    .clone().appendTo($dl)
                    .find("a").text(element.item)
                    .end().clone().appendTo($tagdl)
   
                    
            });
  
        });

    });

    // 健康养生的顶部数据渲染
    const $h = $(data.lis).slice(2);

    // console.log($h);
    $($h).each((index, element) => {
        // console.log(index, element);

        // 顶部图片和文字的渲染
        const $index = index;
        // 遍历顶部的数据

        const $item = $("#health .content-header-item").get($index);
        // console.log($item);

        // pc
        $($item).find(".thumbnail img").attr("src", element.img)
        // .end().find(".caption h3").text($menu)
        
        // 选项卡内容渲染
        // 手机
        // console.log($tagView);
        // 此处注意路径是否对，不然找不到
        $($tagView).clone().appendTo("#mobile-health .option");
        const $moTag = $("#mobile-health .tag-view").get($index);
        const $moCo = $($moTag).find(".container");
        // console.log($moTag);
        // pc
        $($tagItem).clone().appendTo("#health .content-tag");
        const $tLen = $("#health .content-tag-item").length;
        $("#health .content-tag-item").addClass($tLen === 1 ? "active" : "");
        const $coTag = $("#health .content-tag-item").get($index);

        $(element.items).each((index, element) => {
            // console.log(index, element);
            // 手机
            
            // pc
            $($dls)
                .clone().appendTo($moCo)
                .addClass("clearfix")
                .end().append($dts).clone()
                .end().find("dt").text(element.bword + ":")
                .end().clone().appendTo($coTag)
                .removeClass("clearfix")

            const $dlIndex = index;
            const $coDl = $($coTag).find("dl").get($dlIndex);
            const $moDl = $($moTag).find("dl").get($dlIndex);

            $(element.btitle).each((index, element) => {
                // console.log(index, element);
                
                $($dds)
                    .clone().appendTo($moDl)
                    .find("a").text(element.item)
                    .end().clone().appendTo($coDl)
                
            });

 
            
            
        });




        

    });

    
    



},"json");


// 存放列表页的数据
$.get("https://www.easy-mock.com/mock/5a17dba3b23118413626a5d2/test/lists",
function (data) {
    // console.log(data);
    // 美食菜单
    const homelyMeal = data.homelyMeal;
    // 创建模版
    const $homeList = [
        '<div class="media">',
            '<div class="media-left">',
                '<a href="mobile-detail.html"><img class="media-object" src="" alt=""></a>',
            '</div>',
            '<div class="media-body">',
                ' <h4 class="media-heading"><a href="mobile-detail.html"></a></h4>',
                '<span></span>',
                '<p></p>',
                '<p>',
                '</p>',
            '</div>',
        '</div>',
    ].join('');
    const $aBtn = '<a href="mobile-detail.html" class="btn btn-default" role="button"></a>';
    // console.log($homeList);
    // 遍历数据
    $(homelyMeal).each(function (index, element) {
        // console.log(index, element);
        // 插入模版
        $(".mobile-content .container").last().append($homeList);
        // 匹配索引值
        const $index = index;
        const $homeLists = $(".mobile-content .media").slice(4);
        const $list = $($homeLists).get($index);

        $($list)
            .find("img").attr("src", element.mediaObject)
            .end().find("h4 a").text(element.mediaHeading)
            .end().find("span").text(element.mediaCount + '人阅读')
            .end().find("p").first().text(element.mediaText)


        const $btns = element.mediaBtn;
        $($btns).each(function (index, element) {
            // console.log(index, element);
            const btnIndex = index;
            $($list)
                .find('p').eq(1)
                .append($aBtn).clone()

            const $mediaBtn = $($list).find("p a").get(btnIndex);
            $($mediaBtn).text(element.mediaWord);
 
        })
        
    });

    // 美食菜单模拟数据渲染

    const $temp = [
        '<div class="mobile-content">',
            '<div class="container">',
                '<div class="brand">',
                    '<a href="mobile-home.html"><img src="" alt=""></a>',
                '</div>',
            '</div>',
        '</div>',
    ].join('');
    // console.log($temp);
    const $l = [
        '<div class="list-content">',
            '<div class="content-brand">',
                '<img src="" alt="">',
            '</div>',
            '<div class="content-media">',
            '</div>',
            '<div class="content-pagination text-center">',
                '<ul>',
                    '<li><a href="">上一页</a></li>',
                    '<li class="active"><a href="">1</a></li>',
                    '<li><a href="">2</a></li>',
                    '<li><a href="">3</a></li>',
                    '<li><a href="">4</a></li>',
                    '<li><a href="">5</a></li>',
                    '<li><a href="">6</a></li>',
                    '<li><a href="">7</a></li>',
                    '<li><a href="">8</a></li>',
                    '<li><a href="">9</a></li>',
                    '<li><a href="">下一页</a></li>',
                '</ul>',
            '</div>',
        '</div>',
    ].join('');
    // console.log($l);
    const $listpage = $(data.lists).slice(1,3);
    // console.log($listpage);
    $($listpage).each(function (index, element) {
        // console.log(data.lists);
        // console.log(index,element);
        $("#mobile-list").append($temp).clone();
        $("#list .container").append($l).clone();
        
        const $index = index;
        //手机
        const $content = $(".mobile-content").slice(1).get($index);
        // console.log($content);
        // pc
        const $lc = $(".list-content").slice(1).get($index);

        $($content).find(".brand img").attr("src", element.brand);
        $($lc).find(".content-brand img").attr("src", element.bigbrand);
    
        const $c = element.content;
        $($c).each(function (index, element) {
            // console.log(index, element);
            // 手机
            $($content).find(".container").append($homeList).clone();
            // pc
           $($lc).find(".content-media").append($homeList).clone();
            
            
            const mIndex = index;
            // 手机
            const $m = $($content).find(".media").get(mIndex);
            $($m)
                .find(".media-left img").attr("src", element.img)
                .end().find("h4 a").text(element.title)
                .end().find("span").text(element.total+'人阅读')
                .end().find("p").first().text(element.text)
            const $cm = $($lc).find(".media").get(mIndex);
            
            // pc
            $($cm)
                .find(".media-left img").attr("src", element.simg)
                .end().find("h4 a").text(element.title)
                .end().find("span").text(element.total+'人阅读')
                .end().find("p").first().text(element.text)

            const $k = element.keyword;
            // console.log($k);
            $($k).each(function (index, element) {
                // console.log(index, element);
                const $kIndex = index;
                //  手机
                $($m)
                    .find("p").eq(1)
                    .append($aBtn).clone()
                // pc
                $($cm)
                    .find("p").eq(1)
                    .append($aBtn).clone()
                
                // 手机
                const $key = $($m).find("p a").get($kIndex);
                $($key).text(element.key);
                // pc
                const $lkey = $($cm).find("p a").get($kIndex);
                $($lkey).text(element.key);


                

            });
        });
    });

    // 健康养生
    const $healthpage = $(data.lists).slice(3);
    // console.log($healthpage);
    $($healthpage).each((index , element) => {
        // console.log(index, element);

        // 手机
        $($temp).clone().appendTo("#mobile-health");
        // pc
        $($l).clone().appendTo("#health .container");

        // 手机
        const $mobile = $("#mobile-health .mobile-content");
        const $mLen = $mobile.length;
        // console.log($mLen);

        // 条件判断是否加active
        $mobile.addClass($mLen === 1 ? "active" : "");

        
        // pc
        const $a = $("#health .list-content");
        const $len = $a.length;
        // 条件判断是否加active
        $a.addClass($len === 1 ? "active" : "");

        // console.log($len);
        const $index = index;
        // 手机
        const $mLis = $("#mobile-health .mobile-content").get($index);
        $($mLis)
            .find(".brand img").attr("src", element.brand);
        // pc
        const $lis = $("#health .list-content").get($index);
        $($lis)
            .find(".content-brand img").attr("src", element.bigbrand);

        $(element.content).each((index, element) => {
            // console.log(index, element);
            // 手机
            $($mLis).find(".container").append($homeList).clone();
            // pc
            $($lis).find(".content-media").append($homeList).clone();
            const $mIndex = index;
            // 手机
            const $mM = $($mLis).find(".media").get($mIndex);
            $($mM)
            .find("img").attr("src", element.img)
            .end().find("h4 a").text(element.title)
            .end().find("span").text(element.total+'人阅读')
            .end().find("p").first().text(element.text)

            // pc
            const $m = $($lis).find(".media").get($mIndex);
            // console.log($m);
            $($m)
                .find("img").attr("src", element.simg)
                .end().find("h4 a").text(element.title)
                .end().find("span").text(element.total+'人阅读')
                .end().find("p").first().text(element.text)
            $(element.keyword).each((index, element) => {
                // console.log(index, element);
                const $btnIndex = index;
                const $btn = '<a href="" class="btn btn-default" role="button"></a>';
                // 手机
                $($mM).find("p").last().append($btn).clone();
                const $mBtn = $($mM).find("p a").get($btnIndex);
                $($mBtn).text(element.key);
                // pc
                $($m).find("p").last().append($btn).clone();
                const $aBtn = $($m).find("p a").get($btnIndex);
                // console.log($aBtn);
                $($aBtn).text(element.key)
            });
        });
    });


    


},"json");